<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <div>
          <a-form size="small" :model="searchData" layout="inline">
            <a-form-item label="客户名称">
              <a-input class="aInput" allow-clear v-model="searchData.clientName"/>
            </a-form-item>
            <a-form-item label="开单日期">
              <a-range-picker popup-container="html" class="aInput" allow-clear @change="changTime"/>
            </a-form-item>
            <a-form-item label="退库单号">
              <a-input class="aInput" allow-clear v-model="searchData.retreatLibraryNum"/>
            </a-form-item>
            <a-form-item label="退库类型">
              <a-input class="aInput" allow-clear v-model="searchData.retreatLibraryType"/>
            </a-form-item>
            <a-form-item label="布号">
              <a-input class="aInput" allow-clear v-model="searchData.clothNum"/>
            </a-form-item>
            <a-form-item label="品名">
              <a-input class="aInput" allow-clear v-model="searchData.productName"/>
            </a-form-item>
          </a-form>
        </div>
        <div style="text-align: end;">
          <Toolbar :items="['查询', '新增', '删除', '导出']" @select="selectHandler" @add="addHandler"
                   v-if="handlerState === 1"
                   @export="exportHandler" @del="delHandler"/>
          <Toolbar :items="['查询', '导出']" @select="selectHandler" v-else @export="exportHandler"/>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                       @grid-ready="gridReady" style="height:calc(100% - 45px)"
                       class='ag-theme-alpine' :defaultColDef="defaultColDef" :rowData="table.dataList"
                       :columnDefs="cfsValue"
                       :localeText="localeTextData"/>
      <paginationCopys :total="total" show-total show-jumper show-page-size @change="changePage"
                       @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
                       :page-size="pagination.pageSize" :current="pagination.page"/>
    </template>
    <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showAdd"
              :mask-closable="false" placement="bottom" @cancel="pageData.showAdd = false">
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <a-form ref="formRef" style="margin-top:20px" layout="horizontal" auto-label-width :model="dataForm">
        <a-row :gutter="20">
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="退库单号" field="retreatLibraryNum" :rules="[{ message: '退库单号必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input v-model="dataForm.retreatLibraryNum" allow-clear class="aInput"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="仓库名称" field="warehouseName" :rules="[{ message: '仓库名称必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input v-model="dataForm.warehouseName" allow-clear class="aInput"/>
              <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.warehouseName">
                      <a-option />
                  </a-select> -->
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="退货类型" field="retreatLibraryType" :rules="[{ message: '退货类型必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input v-model="dataForm.retreatLibraryType" allow-clear class="aInput"/>
              <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.retreatLibraryType">
                      <a-option />
                  </a-select> -->
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="订单号" field="orderNo" :rules="[{ message: '订单号必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input allow-clear class="aInput" v-model="dataForm.orderNo"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="客户名称" field="clientName" :rules="[{ message: '客户名称必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input allow-clear class="aInput" v-model="dataForm.clientName"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="开单日期" field="billingTime" :rules="[{ message: '开单日期必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-date-picker popup-container="html" v-model="dataForm.billingTime" allow-clear style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="客户订单号" field="clientOrder" :rules="[{ message: '客户订单号必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input allow-clear class="aInput" v-model="dataForm.clientOrder"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="流转卡号" field="circulationCard" :rules="[{ message: '流转卡号必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input allow-clear class="aInput" v-model="dataForm.circulationCard"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="计件日期" field="pieceTime" :rules="[{ message: '计件日期必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-date-picker popup-container="html" allow-clear class="aInput" v-model="dataForm.pieceTime"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="班组" field="team" :rules="[{ message: '班组必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input allow-clear class="aInput" v-model="dataForm.team"/>
              <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.team">
                      <a-option />
                  </a-select> -->
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="收费项" field="chargeItem" :rules="[{ message: '收费项必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input allow-clear class="aInput" v-model="dataForm.chargeItem"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="16" :xl="16" :lg="24" :md="24" :xs="24">
            <a-form-item label="单价生成明细情况" field="priceDetailed" :rules="[{ message: '单价生成明细情况必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input allow-clear class="aInputLine" v-model="dataForm.priceDetailed"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :xxl="20" :xl="20" :lg="24" :md="24" :xs="24">
            <a-form-item label="备注">
              <a-input allow-clear class="aInputLine" v-model="dataForm.remark"/>
            </a-form-item>
          </a-col>
        </a-row>
        <div class="fbg">
          <a-row :gutter="20">
            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
              <a-form-item label="费用类型" field="costType" :rules="[{ message: '费用类型必填' }]"
                           :validate-trigger="['change', 'blur']">
                <a-input allow-clear class="aInput" v-model="dataForm.costType"/>
                <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.costType">
                        <a-option />
                    </a-select> -->
              </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
              <a-form-item label="染色单价" field="dyePrice" :rules="[{ message: '染色单价必填' }]"
                           :validate-trigger="['change', 'blur']">
                <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.dyePrice"/>
              </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
              <a-form-item label="耐氯提升单价" field="tsprice" :rules="[{ message: '耐氯提升单价必填' }]"
                           :validate-trigger="['change', 'blur']">
                <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.tsprice"/>
              </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
              <a-form-item label="整理单价" field="sortPrice" :rules="[{ message: '整理单价必填' }]"
                           :validate-trigger="['change', 'blur']">
                <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.sortPrice"/>
              </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
              <a-form-item label="胶袋单价" field="tapePrice" :rules="[{ message: '胶袋单价必填' }]"
                           :validate-trigger="['change', 'blur']">
                <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.tapePrice"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
              <a-form-item label="抗黄单价" field="yellowPrice" :rules="[{ message: '抗黄单价必填' }]"
                           :validate-trigger="['change', 'blur']">
                <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.yellowPrice"/>
              </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
              <a-form-item label="纸管单价" field="paperPrice" :rules="[{ message: '纸管单价必填' }]"
                           :validate-trigger="['change', 'blur']">
                <a-input allow-clear class="aInput" v-model="dataForm.paperPrice"/>
              </a-form-item>
            </a-col>
            <a-col :xxl="12" :xl="12" :lg="24" :md="24" :xs="24">
              <a-form-item label="单价构成">
                <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.priceForm"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-checkbox :value="1"> 进缸</a-checkbox>
            <a-checkbox :value="1"> 收染费</a-checkbox>
            <a-checkbox :value="1"> 拨印</a-checkbox>
            <a-checkbox :value="1"> RC处理</a-checkbox>
            <a-checkbox :value="1"> 打包</a-checkbox>
            <a-checkbox :value="1"> 一等品</a-checkbox>
            <a-checkbox :value="1"> 湿刷</a-checkbox>
            <a-checkbox :value="1"> 防粘处理</a-checkbox>
          </a-row>
        </div>
      </a-form>
      <a-tabs   :lazy-load="true" default-active-key="0">
        <!-- <a-button>新增</a-button> -->
        <!-- <a-button type="primary"
                        @click="dataForm.retreatLibraryDetailedList.push({ ...detailItem })">新增</a-button> -->
        <template #extra>
          <el-button type="success" :icon="iconText.CirclePlus"
                     @click="dataForm.retreatLibraryDetailedList.push({ ...detailItem })"
                     style="margin-bottom: 10px;background:#67c23a ;">新增
          </el-button>
        </template>
        <a-tab-pane key="0" title="退库明细">
          <a-table size="small" :columns="createColumns" :data="dataForm.retreatLibraryDetailedList"
                   :pagination="false">
            <template #clientName="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].clientName"/>
            </template>
            <template #stuffCodes="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].stuffCodes"/>
            </template>
            <template #deliveryUnit="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].deliveryUnit"/>
            </template>
            <template #barCode="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].barCode"/>
            </template>
            <template #makeNum="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].makeNum"/>
            </template>
            <template #clothNum="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].clothNum"/>
            </template>
            <template #productName="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].productName"/>
            </template>
            <template #colorScale="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].colorScale"/>
            </template>
            <template #planNo="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].planNo"/>
            </template>
            <template #yarnCount="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].yarnCount"/>
            </template>
            <template #doorWidth="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].doorWidth"/>
            </template>
            <template #gramWeight="{ rowIndex }">
              <a-input-number :min="0" type="text" class="aInput"
                              v-model="dataForm.retreatLibraryDetailedList[rowIndex].gramWeight"/>
            </template>
            <template #size="{ rowIndex }">
              <a-input type="text" class="aInput" v-model="dataForm.retreatLibraryDetailedList[rowIndex].size"/>
            </template>
            <template #horsesNum="{ rowIndex }">
              <a-input-number :min="0" class="aInput"
                              v-model="dataForm.retreatLibraryDetailedList[rowIndex].horsesNum"/>
            </template>
            <template #yarnbatch="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].yarnbatch"/>
            </template>
            <template #unitPrice="{ rowIndex }">
              <a-input-number :min="0" :precision="2" class="aInput"
                              v-model="dataForm.retreatLibraryDetailedList[rowIndex].unitPrice"/>
            </template>
            <template #amount="{ rowIndex }">
              <a-input-number :min="0" :precision="2" class="aInput"
                              v-model="dataForm.retreatLibraryDetailedList[rowIndex].amount"/>
            </template>
            <template #initialLocation="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].initialLocation"/>
            </template>
            <template #initiaTrayCodes="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].initiaTrayCodes"/>
            </template>
            <template #newLocation="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].newLocation"/>
            </template>
            <template #newTrayCodes="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].newTrayCodes"/>
            </template>
            <template #weight="{ rowIndex }">
              <a-input type="text" class="aInput"
                       v-model="dataForm.retreatLibraryDetailedList[rowIndex].weight"/>
            </template>
            <template #action="{ rowIndex }" v-if="dataForm.retreatLibraryDetailedList.length > 1">
              <el-button type="danger" @click="dataForm.retreatLibraryDetailedList.splice(rowIndex, 1)"
                         link>删除
              </el-button>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
      <template #footer>
        <a-button size="mini" @click="pageData.showAdd = false">
          关闭
        </a-button>
        <a-button type="primary" size="mini" @click="saveHandler">
          保存
        </a-button>
      </template>
    </a-drawer>
  </pageTabelLayout>
</template>

<script setup lang="ts">
// import PageTabelLayout from '@/components/pageTabelLayout.vue';
import {reactive, ref, onMounted} from 'vue'
import emitter from "@/hooks/useEventBus";
import {useTableColumn} from '@/hooks/table'
import {WorkStocks, WSearchData} from '@/interface/workStocksInterface';

import {localeText} from '@/api/aggridZw'
import {assTable} from '@/utils/assemblyLevelTable';
import {FormInstance, Message, Modal} from '@arco-design/web-vue';
import {usePagination, useTable} from '@/hooks/table';
import {workShopStocks} from '@/api/DyeingshopManagement/workshopCancelStocks'
import {CirclePlus} from '@element-plus/icons-vue';
import dayjs from 'dayjs';
// export default {
// name: "workshopCancelStocks",
// components: { PageTabelLayout,  },
// setup() {
const workShopStocksApi = workShopStocks();
let headerShow = ref<boolean>(true);
let changHeadShow = (boolVal: boolean) => {
  headerShow.value = boolVal;
  emitter.emit('window-change');
};
onMounted(() => {
  pagination.page = 1;
  doRefresh();
});
let handlerState = ref<number>(1);
const selectHandler = () => {
  doRefresh();
};
const addHandler = () => {
  pageData.showAdd = true;
  pageData.sideTitle = '新增';
};
const formRef = ref<FormInstance>();
const saveHandler = () => {
  formRef.value?.validate().then(async (err) => {
    if (!err) {
      // console.log(dataForm)
      if (dataForm.id) {
        await workShopStocksApi
            .editStocks({...dataForm})
            .then((res: any) => {
              if (res.code === 200) {
                formRef.value?.resetFields();
                pageData.showAdd = false;
                Message.success({
                  content: "修改成功",
                  duration: 5000,
                });
                doRefresh();

              } else {
                Message.error({
                  content: res.message,
                  duration: 2000
                });
              }
            })
            .catch((res) => {
              console.log(res);
            });
      } else {
        await workShopStocksApi
            .addStocks({...dataForm})
            .then((res: any) => {
              if (res.code === 200) {
                formRef.value?.resetFields();
                pageData.showAdd = false;
                Message.success({
                  content: "新增成功",
                  duration: 5000,
                });
                doRefresh();
              } else {
                Message.error({
                  content: res.message,
                  duration: 2000
                });
              }
            })
            .catch((res) => {
              console.log(res);
            });
      }
    } else {
      console.log(err);
    }
  });
};
let detailItem = {
  horsesNum: 0,
  clientName: '',
  stuffCodes: '',
  deliveryUnit: '',
  makeNum: '',
  clothNum: '',
  productName: '',
  colorScale: '',
  planNo: '',
  yarnCount: '',
  doorWidth: '',
  gramWeight: 0,
  yarnbatch: '',
  unitPrice: 0,
  amount: 0,
  barCode: '',
  initialLocation: '',
  initiaTrayCodes: '',
  newLocation: '',
  newTrayCodes: '',
  weight: '',
  size: ''
};
const dataForm = reactive<WorkStocks>({
  id: null,
  warehouseCode: '',
  warehouseName: '',
  retreatLibraryType: '',
  remark: '',
  costType: '',
  retreatLibraryNum: '',
  billingTime: dayjs(Date.now()).format('YYYY-MM-DD'),
  clientOrder: '',
  dyePrice: 0,
  circulationCard: '',
  orderNo: '',
  priceDetailed: '',
  pieceTime: dayjs(Date.now()).format('YYYY-MM-DD'),
  tsprice: 0,
  clientName: '',
  team: '',
  sortPrice: 0,
  chargeItem: '',
  priceForm: 0,
  tapePrice: 0,
  yellowPrice: 0,
  paperPrice: '',
  dutyDep: '',
  retreatLibraryDetailedList: [{...detailItem}]
});

const searchData = reactive<WSearchData>({
  billingTime: '',
  billingTime2: '',
  retreatLibraryNum: '',
  retreatLibraryType: '',
  clientName: '',
  clothNum: '',
  productName: ''
});
const changTime = (date: any) => {
  console.log(date);
}
const exportHandler = () => {
  // if (handlerState.value === 1) {
  //     emitter.emit('export-untreated');
  // } else {
  //     emitter.emit('export-processed');
  // }
  let selectList = gridOption.value.getSelectedRows();
  // console.log(selectList);
  if (selectList.length === 0) {
    Message.error('请勾选需要导出的数据')
    return
  } else {
    //导出数据
    let nowRow = table.dataList.filter(function (o) {
      return (gridOption.value.getSelectedRows().map((o: any) => {
        return o.id
      })).indexOf(o["id"]) !== -1;
    })
    assTable(cfsValue, nowRow, '车间退库信息');
  }
};
const changHandler = (e: number | string) => {
  handlerState.value = +e;
  selectHandler();
};
const pageData = reactive<({
  showAdd: boolean,
  pageLoading: boolean,
  sideTitle: string,
})>({
  showAdd: false,
  sideTitle: "新增",
  pageLoading: false
});
const createColumns = useTableColumn([
  {
    title: "客户名称",
    key: "clientName",
    dataIndex: "clientName",
    slotName: "clientName",
    width: 150,
  },
  {
    title: "收料单号",
    key: "stuffCodes",
    dataIndex: "stuffCodes",
    slotName: "stuffCodes",
    width: 150,
  },
  {
    title: "送货单位",
    key: "deliveryUnit",
    dataIndex: "deliveryUnit",
    slotName: "deliveryUnit",
    width: 150,
  },
  {
    title: "条形码",
    key: "barCode",
    dataIndex: "barCode",
    slotName: "barCode",
    width: 150,
  },
  {
    title: "织造序号",
    key: "makeNum",
    dataIndex: "makeNum",
    slotName: "makeNum",
    width: 160,
  },
  {
    title: "布号",
    key: "clothNum",
    dataIndex: "clothNum",
    slotName: "clothNum",
    width: 160,
  },
  {
    title: "品名",
    key: "productName",
    dataIndex: "productName",
    slotName: "productName",
    width: 150,
  },
  {
    title: "色称",
    key: "colorScale",
    dataIndex: "colorScale",
    slotName: "colorScale",
    width: 150,
  },

  {
    title: "计划单号",
    key: "planNo",
    dataIndex: "planNo",
    slotName: "planNo",
    width: 150,
  },
  {
    title: "纱支",
    key: "yarnCount",
    dataIndex: "yarnCount",
    slotName: "yarnCount",
    width: 150,
  },
  {
    title: "门幅",
    key: "doorWidth",
    dataIndex: "doorWidth",
    slotName: "doorWidth",
    width: 150,
  },
  {
    title: "克重",
    key: "gramWeight",
    dataIndex: "gramWeight",
    slotName: "gramWeight",
    width: 150,
  },
  {
    title: "尺寸",
    key: "size",
    dataIndex: "size",
    slotName: "size",
    width: 150,
  },
  {
    title: "匹数",
    key: "horsesNum",
    dataIndex: "horsesNum",
    slotName: "horsesNum",
    width: 150,
  },
  {
    title: "纱批",
    key: "yarnbatch",
    dataIndex: "yarnbatch",
    slotName: "yarnbatch",
    width: 150,
  },
  {
    title: "单价",
    key: "unitPrice",
    dataIndex: "unitPrice",
    slotName: "unitPrice",
    width: 150,
  },
  {
    title: "金额",
    key: "amount",
    dataIndex: "amount",
    slotName: "amount",
    width: 150,
  },
  {
    title: "原储位",
    key: "initialLocation",
    dataIndex: "initialLocation",
    slotName: "initialLocation",
    width: 150,
  },
  {
    title: "原布笼编号",
    key: "initiaTrayCodes",
    dataIndex: "initiaTrayCodes",
    slotName: "initiaTrayCodes",
    width: 150,
  },
  {
    title: "新储位",
    key: "newLocation",
    dataIndex: "newLocation",
    slotName: "newLocation",
    width: 150,
  },
  {
    title: "新布笼编号",
    key: "newTrayCodes",
    dataIndex: "newTrayCodes",
    slotName: "newTrayCodes",
    width: 150,
  },
  {
    title: "验后重量",
    key: "weight",
    dataIndex: "weight",
    slotName: "weight",
    width: 150,
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "action",
    slotName: "action",
    width: 150,
    fixed: "right",
  },
]);

const table = useTable();
const doRefresh = async () => {
  // workShopStocksApi
  pageData.pageLoading = true;
  await workShopStocksApi.getStocksList({
    page: pagination.page,
    size: pagination.pageSize,
  }, {deleteState: 0, ...searchData}).then(({data, code}) => {
    console.log(data.records);
    if (code === 200) {
      // gridOption.value.sizeColumnsToFit();
      table.handleSuccess(data.data.records);
      gridOption.value.setRowData(data.data.records);
      total.value = data.data.total;
    }
  }).catch(console.log)
      .finally(() => {
        pageData.pageLoading = false;
      });
};
const editHandler = async (data: any) => {
  await workShopStocksApi.getStocksItem({id: data.id}).then((res: any) => {
    // console.log(res);
    if (res.code === 200) {
      let resData = res.data.list;
      for (let key in resData) {
        dataForm[key] = resData[key];
      }
      ;
      pageData.showAdd = true;
      pageData.sideTitle = '编辑';
    } else {
      Message.error(res.message);
    }
  })
};

const delHandler = () => {
  let vals = gridOption.value.getSelectedRows().map((v: any) => {
    return v.id
  });
  if (vals.length > 0) {
    Modal.confirm({
      title: "提示",
      content: "确定要批量删除选中数据吗？",
      cancelText: "取消",
      okText: "删除",
      onOk: async () => {
        const promises = vals.map((id: any) => {
          return workShopStocksApi.delStocks(id);
        });
        Promise.all(promises).then((res: any) => {
          let resStatus = res.every((v: any) => v.code === 200)
          if (resStatus) {
            Message.success("数据删除成功");
            pagination.page = 1;
            doRefresh();
          } else {
            Message.error("数据删除失败");
          }
        }).catch(error => {
          console.log(error)
        });
      },
    });
  } else {
    Message.info("请选择需要删除的数据");
  }
};

const setDelHandler = (id: any) => {
  Modal.confirm({
    title: "提示",
    content: "确定要删除选中数据吗？",
    cancelText: "取消",
    okText: "删除",
    onOk: async () => {
      await workShopStocksApi.delStocks(id).then((res) => {
        if (res.code === 200) {
          Message.success("数据删除成功");
          pagination.page = 1;
          doRefresh();
        } else {
          Message.error("数据删除失败");
        }
      });
    },
  });
};


const pagination = usePagination(doRefresh);
//表格方面
const gridOption = ref();
const gridReady = (params: any) => {
  gridOption.value = params.api;
  //调整表格自适应大小
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  width: 150
};
let cfsValue: any = [
  {
    headerName: '仓库名称',
    field: 'warehouseName',
  },
  {
    headerName: "退库类型",
    field: "retreatLibraryType",
  },
  {
    headerName: "费用类型",
    field: "costType",
  },
  {
    headerName: "开单时间",
    field: "billingTime",
  },
  {
    headerName: "退库单号",
    field: "retreatLibraryNum",
  },
  {
    headerName: "流转卡号",
    field: "circulationCard",
  },
  {
    headerName: "客户名称",
    field: "clientName",
  },
  {
    headerName: "收料单号",
    field: "stuffCodes",
  },
  {
    headerName: "织造序号",
    field: "makeNum",
  },
  {
    headerName: "布号",
    field: "clothNum",
  },
  {
    headerName: "品名",
    field: "productName",
  },
  {
    headerName: "匹数",
    field: "horsesNum",
  },
  {
    headerName: "色称",
    field: "colorScale",
  },
  {
    headerName: "计划单号",
    field: "planNo",
  },
  {
    headerName: "纱支",
    field: "yarnCount",
  },

  {
    headerName: "门幅",
    field: "doorWidth",
  },
  {
    headerName: "克重",
    field: "gramWeight",
  },
  {
    headerName: "纱批",
    field: "yarnbatch",
  },
  {
    headerName: "单价",
    field: "unitPrice",
  },

  {
    headerName: "原库位",
    field: "initialLocation",
  },
  {
    headerName: "原托盘编码",
    field: "initiaTrayCodes",
  },
  {
    headerName: "新托盘编码",
    field: "newTrayCodes",
  },
  {
    headerName: "验后重量",
    field: "weight",
  },
  {
    headerName: "尺寸",
    field: "size",
  },
  {
    headerName: '操作',
    pinned: 'right',
    sortable: false,
    resizable: false,
    filter: false,
    width: 150,
    lockPosition: "right",
    cellRenderer: {
      template: `
        <a-row align="center" justify="space-between">
          <a-col :span="12">
            <el-button style="color:#165dff;" link @click="a">修 改</el-button>
          </a-col>
          <a-col :span="12">
            <el-button type="danger" link @click="b">删除</el-button>
          </a-col>
        </a-row>
      `,
      setup(props: any) {
        const a = () => {
          editHandler(props.params.data);
        };
        const b = () => {
          setDelHandler(props.params.data.id);
        }
        return {
          a,
          b
        }
      }
    }
  },
];
let a = [{
  showRowGroup: 'hide_def',
  "headerName": "",
  "checkboxSelection": true,
  "headerCheckboxSelection": true,
  "pinned": "left",
  "width": 50,
  resizable: false,
  filter: false,
  sortable: false,
  minWidth: 50,
  maxWidth: 50,
  lockPosition: "left",
}]
cfsValue = a.concat(cfsValue);
const total = ref(10);
const changePage = (val: any) => {
  pagination.page = val
  doRefresh();
}
const changeSize = (val: any) => {
  pagination.pageSize = val
  doRefresh();
};
const localeTextData: any = ref(localeText);
let iconText: any = {
  CirclePlus
}
// return {
//     headerShow,
//     selectHandler,
//     changHeadShow,
//     addHandler,
//     exportHandler,
//     changHandler,
//     handlerState,
//     pageData,
//     saveHandler,
//     dataForm,
//     createColumns,
//     searchData,
//     changTime,
//     table,
//     pagination,
//     gridOption,
//     gridReady,
//     defaultColDef,
//     cfsValue,
//     total,
//     changePage,
//     changeSize,
//     localeTextData,
//     formRef,
//     detailItem,
//     iconText,
//     delHandler
//         }
//     },
// }
</script>
<script lang="ts">
export default {
  name: "TkDaichuli",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

.DivFit {
  width: 100%;
  height: 20px;
  margin-left: 20px;
}

.DivFit div {
  float: left;
  width: 200px;
}

.isTable1 {
  margin: 50px;
  width: 90%;
  // margin: 0 auto;
  border: 1.2px solid #ccc;
  text-align: center;
  border-collapse: collapse;

  td {
    border: 1.2px solid #ccc;
  }

  th {
    border: 1.2px solid #ccc;
  }
}
</style>

